<template>
  <div>
    <div id="div1">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="year" placeholder="年度"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="area" placeholder="xx区"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="specialTechnologySeries" placeholder="专业技术系列"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="declarationQualificationMajor" placeholder="资格专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="nameOfSpecialSkillDeclaration" placeholder="专业技术资格名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="get()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <!-- @click="exportExcel" -->
          <el-button type="primary"  @click="handleExport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="div2">
      <p>
        说明：数据统计截止到昨日的数据（单位：人数），年度默认为当年年度
        <el-button @click="func('A')" v-bind:class="{ active: active == 'A' }"
          >表</el-button
        >
        <el-button @click="func('B')" v-bind:class="{ active: active == 'B' }"
          >图</el-button
        >
      </p>
      <div class="block block1" v-show="block == 'A'">
          <!-- <el-table :data="studnetData" style="width: 100%;" ref="multipleTable"  v-loading="fullscreenLoading" id="exportXlsx"> -->
        <el-table :data="tableData" id="exportTable">
          <el-table-column prop="qualificationMajor" label="资格专业">
          </el-table-column>
          <el-table-column label="申报人员">
            <el-table-column prop="total" label="合计"> </el-table-column>
            <el-table-column prop="man" label="男"> </el-table-column>
            <el-table-column prop="woman" label="女"> </el-table-column>
            <el-table-column prop="advanced" label="高级"> </el-table-column>
            <el-table-column prop="intermediate" label="中级">
            </el-table-column>
            <el-table-column prop="primary" label="初级"> </el-table-column>
          </el-table-column>
          <el-table-column label="通过人数">
            <el-table-column prop="total" label="合计"> </el-table-column>
            <el-table-column prop="man" label="男"> </el-table-column>
            <el-table-column prop="woman" label="女"> </el-table-column>
            <el-table-column prop="advanced" label="高级"> </el-table-column>
            <el-table-column prop="intermediate" label="中级">
            </el-table-column>
            <el-table-column prop="primary" label="初级"> </el-table-column>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="change"
          @prev-click="prev"
          @next-click="next"
        >
        </el-pagination>
      </div>
      <div class="block block1" v-show="block == 'B'">
        <el-row>
          <el-col :span="12">
            <div id="main" style="width: 500px; height: 500px"></div>
          </el-col>
          <el-col :span="12">
            <div id="main2" style="width: 500px; height: 500px"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import XLSX from "xlsx";
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      page: 1,
      limit: 5,
      total: 0,
      tableData: [],

      active: "A",
      block: "A",
      year: "",
      area: "",
      specialTechnologySeries: "",
      declarationQualificationMajor: "",
      nameOfSpecialSkillDeclaration: "",
    };
  },

  methods: {
    //导出报表
    handleExport() {
      this.$confirm("该操作将导出选中的列表数据，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //导出
          let table = document.getElementById("exportTable");
          let worksheet = XLSX.utils.table_to_sheet(table);
          let workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
          try {
            XLSX.writeFile(workbook, "职称统计报表.xlsx");
          } catch (e) {
            console.log(e, workbook);
          }
        })
        .catch(() => {});
    },
    //查询
    get() {
      this.$axios({
        url:'/PTDF/countPeople',
        method:'post',
        data:{
        year:this.year,
        area:this.area,
        specialTechnologySeries:this.specialTechnologySeries,
        declarationQualificationMajor:this.declarationQualificationMajor,
        nameOfSpecialSkillDeclaration:this.nameOfSpecialSkillDeclaration,
        }
      }).then((res)=>{
        this.tableData=res.data.data;
      })
    },
    //页面渲染和页码
    getCon() {
      this.$axios({
        url: "/PTDF/countPeople",
        method: "post",
        data: {
          declarationQualificationMajor:this.declarationQualificationMajor,
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data;

        console.log(this.tableData);
        console.log(this.tableData[0].primary);
      });
    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    //图表切换
    func: function (a) {
      this.active = a;
      this.block = a;
    },
    //Eachart饼状图
    initEchart1() {
      console.log(this.tableData[0]);
      var myChart = echarts.init(document.getElementById("main"));

      myChart.setOption({
        title: {
          text: "申报人员",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "50%",
            data: [
              { value: 2, name: "初级" },
              { value: 9, name: "中级" },
              { value: 4, name: "高级" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    initEchart2() {
      var myChart = echarts.init(document.getElementById("main2"));

      myChart.setOption({
        title: {
          text: "通过人员",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "50%",
            data: [
              { value: 2, name: "初级" },
              { value: 9, name: "中级" },
              { value: 4, name: "高级" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.getCon();
    this.initEchart1();
    this.initEchart2();
    sessionStorage.setItem("fName", "ReportForm");
  },
  updated(){
    console.log(this.tableData[0]);
  }
};
</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
#div1 {
  width: 90%;
  height: 60px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 10px;
    .el-input {
      width: 150px;
      height: 34px;
      line-height: 34px;
    }
  }
}
#div2 {
  width: 90%;
  height: 500px;
  margin-top: 30px;
  background: #f7f7f7;
  p {
    color: red;
    font-size: 12px;
    margin-left: 24px;
    height: 50px;
    line-height: 50px;
    button {
      float: right;
      margin: 15px 30px 15px 0;
    }
  }
  .el-table {
    width: 95%;
    margin: auto;
    // .el-table td, .el-table th{
    //   text-align: center !important;
    // }
  }
}
#main {
  float: left;
  margin: 15px 30px 15px 0;
}
</style>